<template>
  <header class="header">
    <el-button @click="handleBackClick" icon="el-icon-arrow-left" type="text">返回</el-button>
  </header>
  <div class="mobile-chat-container">
    <el-card class="chat-window">
      <div class="chat-messages" ref="messages">
        <div class="bot-message">
          <div class="message-content"><font-awesome-icon :icon="['fas', 'robot']" style="color: gray;"/>:<br>我是AI健康小助手,请问有什么能帮到您的吗?</div>
        </div>
        <div
            v-for="message in messages"
            :key="message.id"
            :class="{'user-message': message.user, 'bot-message': !message.user}"
        > 
          <div class="message-content">
            <div v-show="!message.user"><font-awesome-icon :icon="['fas', 'robot']" style="color: gray;"/>:</div>
            {{ message.text }}</div>
        </div>
      </div>
    </el-card>
    <div class="input-container">
      <el-input
          v-model="userInput"
          placeholder="输入你的问题..."
          @keyup.enter="sendMessage"
          class="input-field"
      />
      <el-button @click="sendMessage" class="send-button">发送</el-button>
    </div>
  </div>
</template>

<script>
import axios from "../plugin/axiosInstance";

export default {
  data() {
    return {
      userInput: '',
      messages: [],
    };
  },
  methods: {
    async sendMessage() {
      if (this.userInput.trim() === '') return;

      const userMessage = {
        id: Date.now(),
        text: this.userInput,
        user: true,
      };

      this.messages.push(userMessage);
      this.userInput = '';

      try {
        const response = await axios.post('/AIChat/consult', { message: userMessage.text });
        const botMessage = {
          id: Date.now(),
          text: response.data.data,
          user: false,
        };
        this.messages.push(botMessage);
        this.$nextTick(() => {
          this.scrollToBottom();
        });
      } catch (error) {
        console.error('Error sending message:', error);
      }
    },
    scrollToBottom() {
      const messages = this.$refs.messages;
      messages.scrollTop = messages.scrollHeight;
    },
    async handleBackClick() {
      try {
        await axios.post('/AIChat/endSession');
        this.$router.go(-1);
      } catch (error) {
        console.error('Error ending session:', error);
        // 即使发生错误，也可以选择返回
        this.$router.go(-1);
      }
    }
  },
  mounted() {
    this.scrollToBottom();
  },
};
</script>

<style scoped>
.header {
  display: flex;
  align-items: center;
  padding: 10px;
  background-color: #f5f5f5;
  position: fixed;
  width: 100%;
}

.mobile-chat-container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100vh;
}

.chat-window {
  margin-top: 50px;
  flex-grow: 1;
  width: 100%;
  max-width: 600px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  overflow-y: auto; /* 允许聊天窗口滚动 */
}

.chat-messages {
  padding: 10px;
}

.input-container {
  display: flex;
  padding: 10px;
  border-top: 1px solid #ebebeb;
  background-color: white;
}

.input-field {
  flex-grow: 1;
  margin-right: 10px;
}

.send-button {
  flex-shrink: 0;
}

.user-message {
  text-align: right;
}

.bot-message {
  text-align: left;
}

.message-content {
  display: inline-block;
  padding: 10px;
  border-radius: 5px;
  margin: 5px 0;
}

.user-message .message-content {
  background-color: #d3f261;
}

.bot-message .message-content {
  background-color: #f2f2f2;
}
</style>
